<template>
	<Layout style="padding:0 24px 24px;height:100%;">
		<Breadcrumb style="margin:24px 0">
			<BreadcrumbItem>首页</BreadcrumbItem>
			<BreadcrumbItem>日志查询</BreadcrumbItem>
		</Breadcrumb>
		<Form inline>
			<FormItem><Input type="number" placeholder="执行ID" clearable v-model="pageRequest.condition.id" /></FormItem>
			<FormItem><Input type="text" placeholder="任务名称" clearable v-model="pageRequest.condition.jobName" /></FormItem>
			<FormItem>
				<Select v-model="pageRequest.condition.status" placeholder="执行结果" style="width:200px" clearable>
					<Option value="ERROR">执行错误</Option>
					<Option value="RUNNING">正在执行</Option>
					<Option value="SUCCESS">执行成功</Option>
				</Select>
			</FormItem>
			<FormItem><DatePicker v-model="timeSelect" confirm type="datetimerange" placement="bottom-end" placeholder="请选择时间段" style="width: 350px"></DatePicker></FormItem>
			<FormItem><Button type="primary" icon="ios-search" shape="circle" title="查询" @click="list"></Button></FormItem>
			<FormItem>
				<Dropdown @on-click="clearLog">
					<Button type="primary">
						清除日志记录
						<Icon type="ios-arrow-down"></Icon>
					</Button>
					<DropdownMenu slot="list">
						<DropdownItem name="day">一天之前</DropdownItem>
						<DropdownItem name="week">一周之前</DropdownItem>
						<DropdownItem name="month">一月之前</DropdownItem>
						<DropdownItem name="year">一年之前</DropdownItem>
						<DropdownItem name="all">全部清除</DropdownItem>
					</DropdownMenu>
				</Dropdown>
			</FormItem>
		</Form>
		<Content ref="content" style="padding:0px;background:#fff;height:100%">
			<Table :loading="loading" :columns="tableColumns" :data="pageData.content" :height="tableHeight" border>
				<template slot-scope="{ row, index }" slot="stackTrace">
					<a @click="showTrace(row)" v-if="row.status == 'ERROR'">查看异常</a>
					<Span v-if="row.status == 'RUNNING'">运行中</Span>
					<Span v-if="row.status == 'SUCCESS'">正常</Span>
				</template>
				<template slot-scope="{ row, index }" slot="status">
					<Tag :color="row.status == 'SUCCESS' ? 'success' : row.status == 'RUNNING' ? 'warning' : 'error'">{{ row.status }}</Tag>
				</template>
				<template slot="footer">
					<Page style="margin-left:10px;" :total="pageData.total" :current="pageData.page" :page-size="15" @on-change="changePage"></Page>
				</template>
			</Table>
		</Content>
	</Layout>
</template>

<script language="JavaScript">
export default {
	components: {},
	data() {
		return {
			tableHeight: 100, // 自适应表格高度
			loading: false, // 加载中
			tableColumns: [
				{
					type: 'selection',
					width: 80
				},
				{
					title: '执行ID',
					key: 'id',
					width: 250,
					resizable: true
				},
				{
					title: '任务名称',
					key: 'jobName',
					width: 'auto',
					minWidth: 250,
					resizable: true
				},
				{
					title: '执行状态',
					slot: 'status',
					width: 250,
					resizable: true
				},
				{
					title: '执行开始时间',
					key: 'startTime',
					width: 250,
					resizable: true
				},
				{
					title: '执行结束时间',
					key: 'endTime',
					width: 250,
					resizable: true
				},
				{
					title: '异常跟踪',
					slot: 'stackTrace',
					width: 250,
					resizable: true
				}
			], // 表格列
			// 分页请求
			pageRequest: {
				page: 1,
				rows: 15,
				sort: 'createTime:desc',
				condition: {}
			},
			// 分页查询结果
			pageData: {
				page: 1,
				total: 2,
				content: [] // 表格数据
			},
			timeSelect: [] // 时间选择
		};
	},
	computed: {},
	watch: {
		timeSelect: function() {
			if (this.timeSelect && this.timeSelect.length == 2) {
				let start = Date.parse(this.timeSelect[0]);
				let end = Date.parse(this.timeSelect[1]);
				if (start && end) {
					this.pageRequest.condition.startTime = start.toString('yyyy-MM-dd HH:mm:ss');
					this.pageRequest.condition.endTime = end.toString('yyyy-MM-dd HH:mm:ss');
				}
			}
		}
	},
	created: function() {},
	mounted: function() {
		this.$nextTick(() => {
			this.tableHeight = this.$refs.content.$el.clientHeight;
			// 初始化开始结束时间
			let end = Date.today().at('23:59:59');
			let start = Date.today().at('00:00:00');
			// 设置时间框默认显示
			this.timeSelect = [start.toString('yyyy-MM-dd HH:mm:ss'), end.toString('yyyy-MM-dd HH:mm:ss')];
			// 设置默认条件
			this.pageRequest.condition.startTime = start.toString('yyyy-MM-dd HH:mm:ss');
			this.pageRequest.condition.endTime = end.toString('yyyy-MM-dd HH:mm:ss');
			this.list();
		});
	},
	methods: {
		// 获取列表
		list: function() {
			this.$request.post(
				'/admin/sys/sched/record/list',
				this.pageRequest,
				res => {
					this.pageData = res.data || this.pageData;
				},
				false,
				false
			);
		},
		// 分页
		changePage: function(page) {
			this.pageRequest.page = page;
			this.list();
		},
		// 查看异常
		showTrace: function(row) {
			this.$Modal.info({
				title: row.jobName,
				closable: true,
				width: '90%',
				content: row.stackTrace
			});
		},
		// 清除日志记录
		clearLog: function(name) {
			this.$Modal.confirm({
				title: '确认清除？',
				content: '清除后将不可恢复，是否继断？',
				onOk: () => {
					this.$request.post(
						`/admin/sys/sched/record/deleteBatch/${name}`,
						{},
						res => {
							this.list();
						},
						true,
						true
					);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped="scoped"></style>
